<template>
  <div style="padding: 2% 5% 0 5%">
    <a-radio-group
      v-model:value="activeKey.at_tab"
      button-style="solid"
      @change="getFeed"
    >
      <a-radio-button
        v-for="tab in tabList"
        :key="tab.at_name"
        :value="tab.at_tab"
        >{{ tab.at_name }}</a-radio-button
      >
    </a-radio-group>
    
    <a-list
      class="demo-loadmore-list"
      :loading="loading"
      item-layout="vertical"
      :data-source="itemList.value"
    >
      <!--template #loadMore>
        <div
          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <a-spin v-if="loadingMore"/>
          <a-button v-else @click="loadMore">loading more</a-button>
        </div>
      </template-->

      <template #renderItem="{ item }">
        <a-list-item key="item.a_order" style="min-height:100px;max-height:300px">
          <template #actions >
            <span :key="LikeOutlined" >
              <component v-bind:is="LikeOutlined" style="margin-right: 8px;"/>
              {{ item.like_count }}
            </span>
            <span :key="MessageOutlined">
              <component v-bind:is="MessageOutlined" style="margin-right: 8px"/>
              {{ item.com_count }}
            </span>
            <span :key="StarOutlined">
              <component v-bind:is="StarOutlined" style="margin-right: 8px"/>
              {{ item.sub_count }}
            </span>
            <span :key="'Author'" >
              <a-avatar style="margin-right: 8px"
                v-if="item.u_avatar"
                :src="'/api/avatar/' + item.u_avatar"
              />
              <a-avatar v-else style="margin-right: 8px">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
              {{item.u_name}}
            </span>
          </template>
        
          
          <a-list-item-meta>
            <template #title>
              <a :href="'/user/articledetail?a_id='+ item.a_id">{{ item.a_title }}</a>
            </template>
          </a-list-item-meta>

          <div>{{item.a_html}}</div>
          <div>
            <a-image height="60px" v-for="url in item.imglist" :key="url" :src="url"/>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import { get, post } from "@/common";
import { defineComponent, ref, reactive } from "vue";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined
} from "@ant-design/icons-vue";

const itemList = reactive({});
const tabList = ref([]);
const activeKey = ref({at_tab:"1"});
const getTabList = () => {
  get("/user/feed/gettablist").then(res=>{
    tabList.value = res.data;
    
  })
}
const getFeed = () => {
  get("/user/feed/getfeed",activeKey.value).then(res => {
    itemList.value = res.data;
  });
};

const actions = [
  {
    type: "LikeOutlined"
  },
  {
    type: "MessageOutlined"
  }
];

export default defineComponent({
  setup() {
    getTabList();
    getFeed();
    //const { dataList, loading, loadingMore, loadMore } = useLoadMore(getFakeData, {listKey: 'results',});
    return {
      StarOutlined,
      LikeOutlined,
      MessageOutlined,
      getTabList,
      getFeed,
      tabList,
      itemList,
      activeKey,
    };
  }
});
</script>

<style>
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child,
.ant-radio-button-wrapper:first-child {
  line-height: 25px;
  height: 25px;
  border-radius: 10px 10px 10px 10px;
  position: static;
  border-left: 1px solid #d9d9d9;
}
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child {
  margin-left: 10px;
}
.ant-radio-button-wrapper:not(:first-child)::before {
  position: fixed;
}
</style>
